<template>
	<view class="page">
		<!-- 轮播图 -->
		<swiper class="lunbo-box" indicator-active-color="#FFFFFF" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(list,index) in lunboList" :key="index">
				<image class="lunbo-box" :src="picUrl+list.pic_path" mode=""></image>
			</swiper-item>
			
		</swiper>
		<!-- 热门强推 -->
		<view class="panel-box mt-20">
			<view class="panel-title">
				<view class="panel-title-l">热门强推</view>
				<view class="panel-title-r"></view>
			</view>
			<view class="panel-main">
				
				<view v-for="(list,index) in hotList" :key="index" class="panel-pic-text" @click="toDetails(list.movie_id,list.score)">
					<image class="panel-pic" :src="picUrl+list.face_pic"></image>
					<view class="panel-text">
						{{list.movie_title}}
					</view>
				</view>
				
			</view>
		</view>
		<!-- 科幻电影 -->
		<view class="panel-box mt-20">
			<view class="panel-title">
				<view class="panel-title-l">{{type_name_ch1}}</view>
			</view>
			<view class="panel-main">
				<view v-for="(list,index) in cateMovieA1" :key="index" class="panel-pic-text" @click="toDetails(list.movie_id,list.score)">
					<image class="panel-pic" :src="picUrl+list.face_pic"></image>
					<view class="panel-text">
						{{list.movie_title}}
					</view>
				</view>
			</view>
		</view>
		<!-- 动作电影 -->
		<view class="panel-box mt-20">
			<view class="panel-title">
				<view class="panel-title-l">{{type_name_ch2}}</view>
			</view>
			<view class="panel-main">
				<view v-for="(list,index) in cateMovieA2" :key="index" class="panel-pic-text" @click="toDetails(list.movie_id,list.score)">
					<image class="panel-pic" :src="picUrl+list.face_pic"></image>
					<view class="panel-text">
						{{list.movie_title}}
					</view>
				</view>
			</view>
		</view>
		<!-- 剧情电影 -->
		<view class="panel-box mt-20">
			<view class="panel-title">
				<view class="panel-title-l">{{type_name_ch3}}</view>
			</view>
			<view class="panel-main">
				<view v-for="(list,index) in cateMovieA3" :key="index" class="panel-pic-text" @click="toDetails(list.movie_id,list.score)">
					<image class="panel-pic" :src="picUrl+list.face_pic"></image>
					<view class="panel-text">
						{{list.movie_title}}
					</view>
				</view>
			</view>
		</view>
		<!-- 补底部导航栏距离 -->
		<!-- <view class="full-tabbar"></view> -->
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon.vue';
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				title: 'Hello',
				lunboList: [],
				hotList: [],
				cateMovieA1: [],
				cateMovieA2: [],
				cateMovieA3: [],
				type_name_ch1: [],
				type_name_ch2: [],
				type_name_ch3: [],
				picUrl: this.$pictureUrl
			}
		},
		onLoad() {
			// 取轮播图数据
			this.selectLunbo();
			// 取热门强推
			this.selectTypeMovie(1);
			// 按类型取电影
			this.selectCateMovie('A1');
			this.selectCateMovie('A2');
			this.selectCateMovie('A3');
		},
		onPullDownRefresh(){
			console.log('下拉刷新')
			// 取轮播图数据
			this.selectLunbo();
			// 取热门强推
			this.selectTypeMovie(1);
			// 按类型取电影
			this.selectCateMovie('A1');
			this.selectCateMovie('A2');
			this.selectCateMovie('A3');
		},
		methods: {
			transform() { // 换一换
				console.log('换一换')
			},
			toDetails(movie_id,score) { // 跳转详情
				uni.navigateTo({
					url: '../details/details?movie_id='+movie_id+'&score='+score
				});
			},
			selectLunbo() { // 取轮播图数据
				uni.request({
					url: this.$serverUrl + '/api/index/selectLunbo',
					success: (ret) => {
						if (ret.statusCode !== 200 ) {
							console.log('请求失败', ret);
							return ;
						}
						if (ret.data.code == 0) {
							// 取数据并赋值
							this.lunboList = ret.data.data.list;
						} else {
							console.log('未取得数据');
						}
						uni.stopPullDownRefresh();
					}
				});
			},
			selectTypeMovie(type) { // 取热门强推
				uni.request({
					url: this.$serverUrl + '/api/index/selectTypeMovie?type='+type,
					success: (ret) => {
						if (ret.statusCode !== 200 ) {
							console.log('请求失败', ret);
							return ;
						}
						if (ret.data.code == 0) {
							// 取数据并赋值
							this.hotList = ret.data.data.list;
						} else {
							console.log('未取得数据');
						}
						uni.stopPullDownRefresh();
					}
				});
			},
			selectCateMovie(index) { // 按类型取电影
				uni.request({
					url: this.$serverUrl + '/api/index/selectCateMovie?index='+index,
					success: (ret) => {
						if (ret.statusCode !== 200 ) {
							console.log('请求失败', ret);
							return ;
						}
						if (ret.data.code == 0) {
							// 取数据并赋值
							if (index == 'A1') {
								this.cateMovieA1 = ret.data.data.list;
								this.type_name_ch1 = ret.data.data.type_name_ch;
							}
							if (index == 'A2') {
								this.cateMovieA2 = ret.data.data.list;
								this.type_name_ch2 = ret.data.data.type_name_ch;
							}
							if (index == 'A3') {
								this.cateMovieA3 = ret.data.data.list;
								this.type_name_ch3 = ret.data.data.type_name_ch;
							}
						} else {
							console.log('未取得数据');
						}
						uni.stopPullDownRefresh();
					}
				});
			}
		}
	}
</script>

<style>
	/**轮播图**/
	.lunbo-box {
		width: 100%;
		height: 346upx;
	}
	/**图文面板**/
	.panel-box {
		background-color: #FFFFFF;
		padding: 0upx 30upx;
	}
	.panel-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 68upx;
		font-size: 34upx;
		font-weight: bold;
		color: #3c4a55;
	}
	.panel-main {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.panel-pic-text {
		display: flex;
		flex-direction: column;
		width: 49%;
	}
	.panel-pic {
		width: 100%;
		height: 188upx;
	}
	.panel-text {
		font-size: 30upx;
		line-height: 44upx;
		color: #3c4a55;
		margin:10upx 0upx;
	}
	.panel-zt-pic {
		width: 100%;
		height: 272upx;
		margin-bottom: 10upx;
	}
	.panel-title-l {
		font-size: 34upx;
	}
	.panel-title-r {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28upx;
		color: #007aff;
	}
</style>
